1. Parse HTML 文档解析

解析DOM树和CSSOM树

reflow 回流的位置

2. Recalculate Style 样式计算

计算最终样式表

3. Layout 布局

通过视觉格式化模型 计算实际展示的Dom结构 -> 忽略display: none -> 计算after、before元素

4. Layout 分层

对特殊定位内容分层： -> 定位元素 -> 滚动条元素 -> 具有动画的元素

repaint 重绘的位置

5. Paint 绘制

为每一个分层生成绘制的指令

以上为主线程的任务

6. Tiling 分块

绘制任务拆解，交给多个进程同时进行

7. Raster 光栅化

先处理靠近视口的块

8. Draw 绘制

交给GPU计算 transform属性内容也会在这一步里，因此该属性性能很好